<template>
	<div>
		<mainTop></mainTop>
		<div class="tqhyMiddleBox">
			<div class="zygxHead">
				<div style="color: #150e52;font-size: 36px;font-weight: 600;">资源共享</div>
				<div class="zygxTitle" style="margin-top:0px;position: relative;">
					<ul v-if="type.data"  @mouseleave="zygxMenuHover=selectedzygxMenu" :class="{'ulHidden':!showMore}">
						<li :class="{'zygxHover':zygxMenuHover==-1||selectedzygxMenu==-1}"
							@click="clickAll(),selectedzygxMenu=-1"
							 @mouseover="zygxMenuHover = -1"
						>
							全部
						</li>
						<li v-for="(item,index) in type.data"
							:key="index"
							:class="{'zygxHover':zygxMenuHover==index||selectedzygxMenu==index}"
							@mouseover="zygxMenuHover = index"
							@click="clickType(item.dictValue),selectedzygxMenu=index"
						>
							{{ item.dictLabel }}
						</li>
						<!-- <li v-for="(item,index) in type.data.slice(7)"
							:key="index"
							v-if="showMore"
							@click="clickType(item.dictValue),selectedzygxMenu=index+7"
							:class="{'zygxHover':zygxMenuHover==index+7||selectedzygxMenu==index+7}"
							@mouseover="zygxMenuHover = index+7"
						>
							{{ item.dictLabel }}
						</li> -->
						
						
					</ul>
					<div
					style="display: inline-block;cursor: pointer;position: absolute;    right:20px;top: 25px;" @click="toggleRows" 
						
					>
						<img style="transition: all 0.5s;" src="../images/triangle.png" :class="{'rotate':showMore}"  alt=""/>
						</div>
				</div>
			</div>
			<div class="zygx">
				<div class="zygxContent" >
					<div v-for="(item,index) in resources.rows" :key="index" class="zygxModule" >
						<div style="width: 377px;height: 262px;float: left;">
							<img :src="'https://zha.heavenk.com/prod-api'+item.resourcePic" 
							style="width: 377px;height: 262px;" alt=""></div>
						<div style="float: left;color: #150e52;width: 640px;margin-left:35px;margin-top: 18px;text-align: left;">
							<div style="font-size: 19px;font-weight: 600; 
							font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">
							{{ item.resourceName }}
							<!-- {{ item.resourcePic }} -->
							</div>
							<div style="height: 112px; font-size: 18px;line-height: 30px;
							font-family: Adobe 黑体 Std R;margin-top: 23px;letter-spacing: 1px;">
							<div >
								<div style="font-size: 19px;font-weight: 600; display: inline-block;
							font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;float: left;">产品详情：</div>
								<div style="display: inline-block;float: left;width: 540px;margin-bottom: 10px;height: 125px;overflow: hidden;text-overflow: ellipsis;">
									{{ item.resourceSynopsis }}
								</div>
							</div>
							<div>
								<span style="font-size: 19px;font-weight: 600; 
							font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">联系方式：</span><div style="display: inline-block;">{{item.contact}}</div>
							</div>
							
							</div>
							
						</div>
						
					</div>
				</div>
				
			</div>
		</div>
		<div style="width: 1140px;min-width: 1140px;margin: auto;margin-top: 35px;height: 40px;" v-if="total">
			<div style="height: 60px;float: right;margin-top: 0px;">
				 <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page.sync="currentPage"
				      :page-size="5"
				      layout="prev, pager, next"
				      :total="this.total">
				    </el-pagination>
					<div class="el-pagination__jump">
						共{{totalPageSize}}页，到第<div class="el-input el-pagination__editor is-in-pagination">
							<input type="text" class="inputNum" v-model="pageInputNum"
							oninput="value=value.replace(/[^\d]/g,'');
							if(value<=0)value='';if(value.length > 1 && value.substr(0,1) ==0 && value.substr(1,1) !='.'){
							value= value.substr(1,1)}" >
					</div>
					页
					</div>
					
				<button class="button1" style=""  @click="changePage">确定</button>
			</div>
		</div>
		
		<mainBottom></mainBottom>
	</div>
</template>

<script>
	import mainTop from '../components/mainTop.vue'
	import mainBottom from '../components/mainBottom.vue'
	import axios from 'axios';
	export default {
	  components: { 
		  mainTop,
		  mainBottom
	   },
	   data(){
		   return{
				tqhyHeadHoverIndex:0,
				selectedTqhyHeadHover:0,
				pageSize: 16,
				totalCount: 1,
				totalPageSize:1,
				pageInputNum:'',
				currentPage: 1,
				moduleHoverIndex:-1,
				selectedModuleHover:-1,
				resources:'',
				type:'',
				total:0,
				showMore: false,
				mytype:'',
				zygxMenuHover:-1,
				selectedzygxMenu:-1
			   };
			},
		created(){
			this.getResorces(1);
			this.getType();

		},
		methods:{
			toggleRows() {  
				this.showMore = !this.showMore;  
			},  
			clickAll(){
				this.getResorces(1)
				this.currentPage=1
			},
			clickType(Type){
				// console.log(Type);
				this.mytype=Type
				this.getResorces(1,Type)
				this.currentPage=1
			},
			getResorces(pnum,Type){
				axios.get('https://zha.heavenk.com/prod-api/web/sharing/list',{
					params:{
							pageSize:5,
							pageNum:pnum,
							resourceType:Type,

						}
					}).then((res)=>{
						this.resources=res.data
						// console.log(res.data);
						this.total=res.data.total
						this.totalPageSize=Math.ceil(this.total/5)
					})
			},
			getType(){
				axios.get('https://zha.heavenk.com/prod-api/system/dict/data/type/yzh_resource_sharing_type',{
					params:{
							
						}
					}).then((res)=>{
						this.type=res.data
						// console.log(res.data);
					})
			},
			
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange() {
			//    this.contentPerPage.pn=this.currentPage;
			//    contentList(this.contentPerPage).then(response => {
			//            this.contentPerPageList = response.data;
			//          });
				this.getResorces(this.currentPage)
			},
			changeFirstPage(){
				this.currentPage=1;
				this.handleCurrentChange();
			},
			changeLastPage(){
				this.currentPage=this.totalPageSize;
				this.handleCurrentChange();
			},
			getTotalPageSize(){
				this.totalPageSize=this.totalCount/this.pageSize
			},
			changePage(){
				this.currentPage=parseInt(this.pageInputNum);
				this.handleCurrentChange();
			},
		},
		}
</script>

<style>
	.ulHidden{
		height:54px;
		overflow:hidden !important;
	}
	.rotate{
		 transform:rotate(-180deg);
		        transition: all 0.5s;
	}
	.tqhyMiddleBox{
		width: 100%;
		min-width: 1700px;
		background-color: #f7f7f7;
	}
	.zygxHead{
		width: 1140px;
		min-width: 1140px;
		/* height: 60px; */
		margin: auto;
		margin-top: 50px;
	}
	.tqhyPageHead ul{
		list-style: none;
		text-align: center;
		height: 60px;
		width: 1140px;
	}
	.tqhyHeadHover{
		background-color: #150e52 !important;
		color: #fff !important;
	}
	.zygxTitle ul{
		/* position: relative; */
		width: 1116px;
		
	}
	.zygxTitle ul li{
		cursor: pointer;
		 display: inline-block;
		 /* width:115px; */
		 height: 34px;
		 color: #150e52;
		 line-height: 34px;
		 border-radius: 15px;
		 margin-right: 20px;
		 margin-left: 0px;
		 font-size: 20px;
		 text-align: center;
		 /* overflow: hidden;
		 text-overflow: ellipsis;white-space: nowrap; */
		 margin-top: 20px;
		 padding: 0px 22px;
	}
	.zygxHover{
		background-color: #150e52;
		color: #fff !important;
	}
	.tqhyPageHead ul li:nth-child(-n+3){
		width: 195px;
		height: 50px;
		margin: auto;
		line-height: 50px;
		float: left;
		margin-right:114px;
		font-size: 22px;
		color: #150e52;
		font-weight: 600;
		text-align: center;
		border-radius: 30px;
		border: 2px solid #150e52;
	} 
	.tqhyPageHead ul li:nth-child(4){
		width: 195px;
		height: 50px;
		line-height: 50px;
		float: left;
		margin: auto;
		border-radius: 30px;
		border: 2px solid #150e52;
		font-size: 22px;
		color: #150e52;
		font-weight: 600;
		text-align: center;
	}
	
	.el-pagination{
		  display: inline-block;
		  float: left;
	  }
	  .el-pager li,.el-pager li.active+li {
		border: 2px solid #8c8c8c !important;
		margin-right: 12px !important;
		color: #8c8c8c;
		border-radius: 7px;
		height: 35px !important;
		font-size: 18px !important;
		line-height: 33px !important;
		width: 26px;
		font-family: Arial, Helvetica, sans-serif;
		
	  }
	   .el-pager li:hover{
		   color: #8c8c8c !important;
	   }
	  .el-pager li{
		  background-color: #f7f7f7 !important;
	  }
	  .btn-next{
		  padding-left: 2px !important;
		  background-color: #f7f7f7 !important;
	  }
		   
	   .btn-prev{
		    background-color: #f7f7f7 !important;
	   }
	  .btn-prev .el-icon-arrow-left:before,.btn-next .el-icon-arrow-right:before {
	      border: 2px solid #8c8c8c;
	      height: 31px;
	      display: flex;
	      width: 26px;
	      border-radius: 7px;
	      text-align: center;
	      margin: auto;
	      line-height: 32px;
	      font-size: 24px;
	      padding-left: 5px;
	      font-weight: 700;
		  color: #8c8c8c;
	  }
	  .el-icon-arrow-right:before {
	      content: "\E6E0";
	      margin-left: -12px;
	  }
	 
	  .button1{
	  		  width: 67px;
	  		  height: 36px;
	  		  font-size: 16px;
	  		  border-radius: 7px;
	  		  color: #ffffff;
	  		  background-color: #150e52;
	  		  font-weight: 700;
	  		  margin-left:12px;
	  		  float: left;
	  		  margin-top: 2px;
			  border: 0px;
	  }
	  .el-pager li.active {
	      color: white !important;
	      cursor: default;
	      background-color: #150e52 !important;
	      border: 1px !important;
	      /* text-align: center; */
	      line-height: 36px !important;
		  
	  }
	  .el-pagination__jump {
	      margin-left: 3px !important;
	      font-weight: 600 !important;
	      color: #8c8c8c !important;
	      font-size: 17px;
		  float: left;
		  margin-top: 1px;
	  }
	  .inputNum{
		  width: 33px !important;
		  height: 33px !important;
		  border: 2px solid #8c8c8c !important;
		  border-radius: 7px;
		  border: 0;
		  outline: none; 
		  text-align: center;
		  background-color: #f7f7f7;
	  }
	.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{
		border:0px !important;
		color: #8c8c8c !important;
	}
	.zygx{
		width: 1140px;
		min-width: 1140px;
		margin: auto;
		margin-top: 35px;
		/* height: 1768px; */
	}
	.liHover{
		color: #fff !important;
		background-color: #150e52 !important;
		border-radius: 15px;
	}
	.zygxContent{
		width: 1140px;
		min-width: 1140px;
		margin-top: 30px;
		/* height: 1698px; */
		overflow: hidden;
		min-height: 500px;
	}
	.zygxModule{
		width: 1080px;
		height: 262px;
		background-color: #fff;
		padding: 30px 30px;
		position: relative;
		margin-bottom: 22px;
	}
	.moduleHover{
		background-color: #fff !important;
	}
</style>